<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>TPlay Store</title>
	<link href="../js/jquery-ui-1.8.23.custom.css" rel="Stylesheet" type="text/css">
	<link href="/TPlayWeb/tplaystore.css" rel="Stylesheet" type="text/css">
	<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../js/jquery-ui-1.8.23.custom.min.js"></script>
	<script type="text/javascript" src="../js/jquery.ui.datepicker-es.js"></script>
	<link href="/TPlayWeb/imagenes/Icon.png" rel="icon" type="image/png">
	<script>
	$(function() {
		$( "#fecha" ).datepicker( $.datepicker.regional[ "es" ] );
	});

	function validarSubmit(){
		if(document.altaPerfil.nick.value == ""){
			alert("Falta ingresar Nick.");
			return false;
		}else if(document.altaPerfil.correo.value == ""){
			alert("Falta ingresar Correo.");
			return false;
		}else if(document.altaPerfil.nombre.value == ""){
			alert("Falta ingresar Nombre.");
			return false;
		}else if(document.altaPerfil.apellido.value == ""){
			alert("Falta ingresar Apellido.");
			return false;
		}else if(document.altaPerfil.fecha.value == ""){
			alert("Falta ingresar Fecha de nacimiento.");
			return false;
		}else if(document.altaPerfil.contrasenia.value == ""){
			alert("Falta ingresar Contraseña.");
			return false;
		}else if(document.altaPerfil.contrasenia2.value == ""){
			alert("Falta ingresar Confirmar contraseña.");
			return false;
		}else if(document.altaPerfil.tipoperfil[1].checked && document.altaPerfil.sitio.value == ""){
			alert("Falta ingresar Sitio web.");
			return false;
		}else if(document.altaPerfil.foto.value == ""){
			alert("Falta ingresar Foto.");
			return false;
		}else if(document.altaPerfil.contrasenia.value != document.altaPerfil.contrasenia2.value){
			alert("Las contraseñas no coinciden.");
			return false;
		}
		return true;
	}
	
	function validarNick(posible){
		$.ajax({
				url: "/TPlayWeb/perfiles/validarNick?nick=" + posible
			}).done(function(msg) {
				$("#resNick").text(msg);
			});
	}
	
	function validarCorreo(posible){
		$.ajax({
				url: "/TPlayWeb/perfiles/validarCorreo?correo=" + posible
			}).done(function(msg) {
				$("#resCorreo").text(msg);
			});
	}
</script>
</head>
<body>
	<jsp:include page="/WEB-INF/encabezado.jsp"/>
	<div id="contenido">
	<form name="altaPerfil" action="/TPlayWeb/perfiles/altaPerfil" method="post" onSubmit="return validarSubmit();" enctype="multipart/form-data">
	 
		<div class="filaPerfil">
			<span class="etiquetaPerfil"> 
			<label for="nick">Nick</label>
			</span> 
			<span class="valorPerfil"> 
			<input type="text" name="nick" onkeyup="validarNick(this.value);"/>
			</span>
			<span id="resNick" class="valorPerfil"> 
			</span>
		</div>
		<div class="filaPerfil">
			<span class="etiquetaPerfil"> 
			<label for="correo">Correo</label>
			</span> 
			<span class="valorPerfil"> 
			<input type="text" name="correo" onkeyup="validarCorreo(this.value);" />
			</span>
			<span id="resCorreo" class="valorPerfil"> 
			</span>
		</div>
		<div class="filaPerfil">
			<span class="etiquetaPerfil"> 
			<label for="nombre">Nombre</label>
			</span> 
			<span class="valorPerfil"> 
			<input type="text" name="nombre" />
			</span>
		</div>
		<div class="filaPerfil">
			<span class="etiquetaPerfil"> 
			<label for="apellido">Apellido</label>
			</span> 
			<span class="valorPerfil"> 
			<input type="text" name="apellido" />
			</span>
		</div>
		<div class="filaPerfil">
			<span class="etiquetaPerfil"> 
			<label for="fecha">Fecha de nacimiento</label>
			</span> 
			<span class="valorPerfil"> 
			<input type="text" name="fecha" id="fecha"/>
			</span>
		</div>
		<div class="filaPerfil">
			<span class="etiquetaPerfil"> 
			<label for="contrasenia">Contraseña</label>
			</span> 
			<span class="valorPerfil"> 
			<input type="password" name="contrasenia" />
			</span>
		</div>
		<div class="filaPerfil">
			<span class="etiquetaPerfil"> 
			<label for="contrasenia2">Confirma contraseña</label>
			</span> 
			<span class="valorPerfil"> 
			<input type="password" name="contrasenia2" />
			</span>
		</div>
		<div class="filaPerfil">
			<span class="etiquetaPerfil"> 
			Cliente
			</span> 
			<span class="valorPerfil"> 
			<input type="radio" name="tipoperfil" value="cliente" checked="checked" onclick="document.altaPerfil.sitio.disabled=true;"/>
			</span>
		</div>
		<div class="filaPerfil">
			<span class="etiquetaPerfil"> 
			Desarrollador
			</span> 
			<span class="valorPerfil"> 
			<input type="radio" name="tipoperfil" value="desarrollador" onclick="document.altaPerfil.sitio.disabled=false;"/>
			</span>
		</div>
		<div class="filaPerfil">
			<span class="etiquetaPerfil"> 
			<label for="sitio">Sitio web</label>
			</span> 
			<span class="valorPerfil"> 
			<input type="text" name="sitio" disabled="disabled"/>
			</span>
		</div>
		<div class="filaPerfil">
			<span class="etiquetaPerfil"> 
			<label for="foto">Foto perfil</label>
			</span>			
			<span class="valorPerfil">
			<input type="file" name="foto" accept="image/*"/>
			</span>
		</div>
		<div class="filaPerfil">
			<span class="etiquetaPerfil"> 
			
			</span>			
			<span class="valorPerfil">
			<input type="submit" value="Crear Perfil" />
			</span>
		</div>
			
		</form>
	</div>
	<jsp:include page="/WEB-INF/pie.jsp"/>
</body>
</html>